import React from 'react'
import {Link} from 'react-router'

import './shuffling.less'

export default class Shuffling extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            nowLocal: 0,
            autoPlayFlag: null,
            startX: 0,
            startY: 0,
            isTouchMove: false,
        }
    }
    componentDidMount(){
        this.goPlay()
    }
    componentWillUnmount(){
        clearInterval(this.state.autoPlayFlag)
    }
    turn(n){
        let _n = this.state.nowLocal + n;
        if(_n < 0){
            _n = _n + this.props.items.length
        }
        if(_n > this.props.items.length - 1){
            _n = _n - this.props.items.length
        }
        this.setState({nowLocal: _n})
    }
    goPlay(){
        if(this.props.autoPlay){
            this.state.autoPlayFlag = setInterval(()=>{this.turn(1)},this.props.delay*1000)
        }
    }

    touchStart(e){
        let touches = e.touches[0];
        this.setState({
            startX : touches.clientX,
            startY : touches.clientY,
        });
    }
    touchMove(e){
        this.setState({
            isTouchMove : true
        });
        e.preventDefault();
    }
    touchEnd(e){
        let touches = e.changedTouches[0],
            endX = touches.clientX,
            endY = touches.clientY,
            distanceX = this.state.startX - endX,
            distanceY = this.state.startY - endY;
        if(Math.abs(distanceX) >= Math.abs(distanceY)){
            if(distanceX > 20){
                clearInterval(this.state.autoPlayFlag);
                this.turn(1);
                this.state.autoPlayFlag = setInterval(() => {
                    this.turn(1);
                },this.props.delay*1000)
            }else if(distanceX < -20){
                clearInterval(this.state.autoPlayFlag);
                this.turn(-1);
                this.state.autoPlayFlag = setInterval(() => {
                    this.turn(1);
                },this.props.delay*1000)
            }
        }
    }
    render(){
        let {items} = this.props;
        return(
            <div className="shuffling"
                 onTouchStart={this.touchStart.bind(this)}
                 onTouchMove={this.touchMove.bind(this)}
                 onTouchEnd={this.touchEnd.bind(this)}>
                <SliderItem items={items} nowLocal={this.state.nowLocal}/>
                {items.length > 1 ? <SliderDot count={items.length} nowLocal={this.state.nowLocal}/> : ""}
            </div>

        )
    }
}

class SliderItem extends React.Component{
    render(){
        let {items,nowLocal} = this.props;
        let width = 100*items.length + "%";
        let itemNodes = [];
        items.map((obj,i)=>{
            itemNodes.push(
                <li key={i}>
                    <a href={obj.link} style={{backgroundImage: `url(${obj.src})`}}> </a>
                </li>
            )
        });
        return(
            <ul style={{width: width,
            left:-100*nowLocal + "%"}}>
                {itemNodes}
            </ul>
        )
    }
}

class SliderDot extends React.Component{
    render(){
        let {count,nowLocal} = this.props;
        let dotNodes = [];
        for(let i = 0; i < count; i++){
            dotNodes[i] = (
                <li key={i} className={i === nowLocal ? "active" : ""}> </li>
            )
        }
        return(
            <div className="dot">
                {dotNodes}
            </div>

        )
    }
}